<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>实验二页面设计</title>
  <style>
    /* 设置整个页面的宽高使用移动适配 */
    .box{
      width: 100vw;
      height: 100vh;
}
/* 设置头部区域 */
.box .head202210244135{
  height:10vh;
  width:80vw;
  margin-bottom: 0.5vh;
  background-color: #ffffff;
  margin-left: 10vw;
}
/* banner图片区域 */
.box .head202210244135 .left {
  float: left;
  width: 30vw;
  margin-left: 8vw;
  margin-top: 1vh;
}
.box .head202210244135 .left img {
margin-top: 0.3vh;
margin-left: 3vw;
}
/* 登录注册部分 */
.box .head202210244135 .right {
  width: 30vw;
  height: 10vh;
  float: right;
  margin-right: 10vw;
  /* text-align: center; */
  /* align-items: center; */
  padding-top: 4vh;
  padding-left: 25vw;
}
/* 设置导航区域 */
.box .nav{
  height: 4vh;
  width: 80vw;
  margin-bottom: 0.5vh;
  background-color: #424240;
  margin-left: 10vw;
}
.box .nav .nav-list{
  height: 4vh;
  width: 80vw;
  margin-left: 9vw;
  display: flex;
}
.box .nav .nav-list li{
  height: 4vh;
  width: 10vw;
  color: #ffffff;
  /* font-weight: 10; */
 padding-top: 0.5vh;
 padding-left: 3.5vw;
}
/*鼠标悬停时的颜色 */
.box .nav .nav-list li:hover{
background-color: #da5454;
}
/* 设置banner区域 */
.box .banner{
  height: 60vh;
  width: 80vw;
  margin-bottom: 0.5vh;
  /* background-color: #d85b68; */
  margin-left: 10vw;
}
/* 设置背景图区域 */
.box .banner .bgc{
  width: 80vw;
  height: 45vh;
}
.box .banner .bgc img{
  width: 100%;
  height: 100%;
}
/* 这是分类介绍 */
.box .banner .sort{
  width: 80vw;
  height: 14.8vh;
  margin-top: 0.1vh;
  /* background-color: pink; */
}
/* 这是分类列表区域 */
.box .sort .sort-list{
  display: flex;
  width: 70vw;
  height: 14.8vh;
  margin-top: 0.3vh;
  margin-left: 5vw;
   /* background-color: aqua; */
}
/* 分类区域 */
.box .sort .sort-list li{
  width: 20vw;
  height: 14.8vh;
  margin-right:0.1vw;
  border: 3px solid gainsboro;
   /* background-color:wheat; */
}
/*  小分类区域*/
.box .sort .sort-list li .left {
  width: 4vw;
  height:6vh;
  margin-right:0.1vw;
  margin-left: 0.5vw;
  margin-top: 3vh;
   /* background-color:white; */
   float: left;
}
.box .sort .sort-list li .right {
  width: 12vw;
  height: 10vh;
  margin-right:0.1vw;
  margin-left: 0.1vw;
  margin-top: 3.5vh;
   /* background-color:white; */
   float: right;
}
/* 设置字体 */
.box .sort .sort-list li .one {
 color:black;
 font-size: 1rem;
}
.box .sort .sort-list li .two {
 color:#8e929c;
 font-size: 0.8rem;
}
/* 设置main 区域*/
.box main{
  width: 70vw;
  height: 80vh;
  margin-top: 0.1vh;
  margin-bottom: 4.0vh;
  /* background-color: burlywood; */
  margin-left: 15vw;
}
/* 设置房间展示区域 */
.box main .rooms{
width: 70vw;
height: 52vh;
margin-bottom: 0.5vh;
/* background-color: rgb(146, 245, 100); */
}
.box main .rooms .title{
width: 70vw;
height: 5vh;
margin-bottom: 0.1vh;
color: #333;
font-size: 18px;
font-weight: bold;
padding-bottom: 0.8vh;
border-bottom: 3px solid gainsboro;  
}
.box main .rooms .pic{
width: 70vw;
height: 50vh;
margin-top: 0.4vh;
/* display: flex; */
/* background-color: red; */
}
.box main .rooms .pic-one{
  /* margin-top: 1vh; */
display: flex;
}
.box main .rooms .pic-two{
display: flex;
/* margin-top: 1vh; */
}
/* 设置图片区域 */
.box main .rooms .pic .one{
width: 35vw;
height: 23vh;
margin-top: 0.3vh;
margin-right: 0.8vw;
background-color: green;
}
/* 设置图片填充100% */
.box main .rooms .pic img{
width: 100%;
height: 100%;
}
.box main .rooms .pic .two{
width: 20vw;
height: 23vh;
margin-top: 0.3vh;
margin-right: 0.8vw;
background-color: green;
}
.box main .rooms .pic .three{
width: 20vw;
height: 23vh;
margin-top: 0.3vh;
margin-right: 0.8vw;
background-color: green;
}
.box main .rooms .pic .four{
width: 20vw;
height: 23vh;
margin-top: 0.3vh;
margin-right: 0.8vw;
background-color: green;
}
.box main .rooms .pic .five{
width: 35vw;
height: 23vh;
margin-top: 0.3vh;
margin-right: 0.8vw;
background-color: green;
}
.box main .rooms .pic .six{
width: 20vw;
height: 23vh;
margin-top: 0.3vh;
margin-right: 0.8vw;
background-color: green;
}
/* 设置内容区域 最新动态区域  */
.box main .contain{
width: 70vw;
height: 30vh;
/* background-color: red; */
margin-bottom: 0.5vh;
}
.box main .contain .contain-title{
width: 70vw;
height: 5vh;
margin-bottom: 0.1vh;
color: hsl(0, 0%, 20%);
font-size: 18px;
font-weight: bold;
padding-bottom: 0.8vh;
border-bottom: 3px solid gainsboro;  
}
/* 设置分类盒子 */
.box main .contain .contain-table{
width: 70vw;
height: 25vh;
margin-top: 0.8vh;
display: flex;
/* background-color: green; */
}
.box main .contain .contain-table .one .one-title{
width: 22vw;
height: 3vh;
color: hsl(0, 0%, 20%);
font-size: 18px;
font-weight: bold;
margin-left: 0.5vw;
margin-top: 0.2vh;
}
.box main .contain .contain-table .one{
width: 23vw;
height: 25vh;
margin-right: 1vw;
/* background-color:red; */
border:3px solid gainsboro; 
}
.box main .contain .contain-table .one .one-contain{
width: 22vw;
height: 7vh;
margin-right: 1vw;
margin-left: 0.3vw;
/* background-color:beige; */
border-bottom: 3px solid gainsboro;  
display: flex;
}
.box main .contain .contain-table .one .one-contain .left {
  width: 1vw;
  height:6vh;
  margin-right:0.1vw;
  margin-left: 0.4vw;
  margin-top: 1vh;
   /* background-color:white; */
}
.box main .contain .contain-table .one .one-contain .right {
  width: 18vw;
  height: 6vh;
  /* margin-right:2vw; */
  margin-left: 2vw;
  margin-top: 1.3vh;
}
/* 设置字体 */
.box main .contain .contain-table .one .one-contain .right .one-one {
 color:black;
 font-size: 1rem;
}
.box main .contain .contain-table .one .one-contain .right .one-two {
 color:#8e929c;
 font-size: 0.8rem;
}
/* .box main .contain .contain-table .two{
width: 22vw;
height: 25vh;
margin-right: 2vw;
background-color:red;
border-bottom: 3px solid gainsboro;  
}
.box main .contain .contain-table .three{
width: 22vw;
height: 25vh;
 margin-right: 1vw;
background-color:red;
border-bottom: 3px solid gainsboro;  
}  */
/* 设置底部区域 */
.box .foot{
  width: 80vw;
  height: 15vh;
  background-color: black;
  margin-left: 10vw;
}

/* .box .foot .up{
  width: 80vw;
  height: 4vh;
  margin-top: 2vh;
  background-color: pink;
} */
.box .foot .up ul{
 display: flex;
 margin-left: 29vw;
}
.box .foot .up ul li{
 margin-top: 5vh;
}

.box .foot .up ul a{
 color: aliceblue;
}
.box .foot .down p{
 color: aliceblue;
 margin-left: 30vw;
}





/* 消除默认样式 */
/* // base.css */
/* 清除默认样式的代码 */
/* 去除常见标签默认的 margin 和 padding */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
input {
  margin: 0;
  padding: 0;
}
 
/* 內减模式 */
* {
  box-sizing: border-box;
}
 
/* 设置网页统一的字体大小、行高、字体系列相关属性 */
body {
  font: 16px/1.5 'Helvetica Neue', Helvetica, Arial, 'Microsoft Yahei', 'Hiragino Sans GB',
    'Heiti SC', 'WenQuanYi Micro Hei', sans-serif;
  color: #333;
}
 
/* 去除列表默认样式 */
ul,
ol {
  list-style: none;
}
 
/* 去除默认的倾斜效果 */
em,
i {
  font-style: normal;
}
 
/* 去除a标签默认下划线，并设置默认文字颜色 */
a {
  text-decoration: none;
  color: #333;
}
 
/* 设置img的垂直对齐方式为居中对齐，去除img默认下间隙 */
img {
  vertical-align: middle;
}
 
/* 去除input默认样式 */
input {
  border: none;
  outline: none;
  color: #333;
}
 
/* 左浮动 */
.fl {
  float: left;
}
 
/* 右浮动 */
.fr {
  float: right;
}
 
/* 双伪元素清除法 */
.clearfix::before,
.clearfix::after {
  content: '';
  display: table;
}
.clearfix::after {
  clear: both;
}
 
/*版心居中*/
.wrapper {
  /*width: 1240px;*/
  margin: 0 auto;
}
  </style>
</head>
<body>
  <div class="box">
    <!-- 头部区域 -->
    <header class="head202210244135">
      <div class="left"><img src="../images/logo.png" alt=""></div>
      <div class="right">
        <a href="">登录</a><span>|</span><a href="">注册</a>
      </div>
    </header>
    <!-- 导航区域 -->
    <nav class="nav">
     <ul class="nav-list">
      <li>首页</li>
      <li>设计案例</li>
      <li>精装图库</li>
      <li>有问必答</li>
      <li>逛商品</li>
     </ul>
    </nav>
    <!-- 版心区域 -->
    <div class="banner"><div class="bgc"><img src="../images/banner.jpg" alt=""></div>
  <div class="sort">
    <ul class="sort-list">
      <li>
        <div class="left">
        <img src="../images/pic01.jpg" alt=""></div>
      <div class="right">
        <div class="one">浏览真实设计案列</div>
        <div class="two">设计师原创作品</div>
      </div>
    </li>
      <li>
        <div class="left">
          <img src="../images/pic02.jpg" alt=""></div>
        <div class="right">
          <div class="one">找到满意的设计师</div>
          <div class="two">设计师云集于此</div>
        </div>
      </li>
      <li>
        <div class="left">
          <img src="../images/pic03.jpg" alt=""></div>
        <div class="right">
          <div class="one">装修疑问</div>
          <div class="two">每秒钟都有设计师在线</div>
        </div>
      </li>
      <li>
        <div class="left">
          <img src="../images/pic04.jpg" alt=""></div>
        <div class="right">
          <div class="one">在线担保交易</div>
          <div class="two">资金托管,满意担保</div>
        </div>
      </li>
    </ul>
  </div>
</div>
    <!-- 主体区域 -->
    <main>
      <section class="rooms">
        <div class="rooms title">设计案例</div>
        <div class="pic">
          <div class="pic-one">
            <div class="one"><img src="../images/pic05.jpg" alt=""></div>
          <div class="two"> <img src="../images/pic06.jpg" alt=""></div>
          <div class="three"> <img src="../images/pic07.jpg" alt=""></div>
          </div>
          <div class="pic-two">
              <div class="four"><img src="../images/pic08.jpg" alt=""></div>
              <div class="five"><img src="../images/pic09.jpg" alt=""> </div>
              <div class="six"> <img src="../images/pic10.jpg" alt=""></div>
            </div>
          </div>
      </section>
      <section class="contain">
        <div class="contain-title">最新动态</div>
        <div class="contain-table">
          <!-- 有问必答 -->
          <div class="one">
            <div class="one-title">有问必答</div>
            <div class="one-contain">
              <div class="left">
                <img src="../images/pic01.png" alt=""></div>
              <div class="right">
                <div class="one-one">厨房在哪个方位风水好</div>
                <div class="one-two">回答：看风水要结合...</div>
              </div>
            </div>
            <div class="one-contain">
              <div class="left">
                <img src="../images/pic02.png" alt=""></div>
              <div class="right">
                <div class="one-one">卧室多大比较合适</div>
                <div class="one-two">问答：一般卧室的大小</div>
              </div>
            </div>
            <div class="one-contain">
              <div class="left">
                <img src="../images/pic03.png" alt=""></div>
              <div class="right">
                <div class="one-one">家具用品哪个品牌好</div>
                <div class="one-two">问答：谐美家居还是不错的</div>
              </div>
            </div>
          </div>
          <!-- 发布需求 -->
          <div class="one">
            <div class="one-title">发布需求</div>
            <div class="one-contain">
              <div class="left">
                <img src="../images/pic04.png" alt=""></div>
              <div class="right">
                <div class="one-one">周小姐提交了设计需求</div>
                <div class="one-two">上海110平米二手住宅...</div>
              </div>
            </div>
            <div class="one-contain">
              <div class="left">
                <img src="../images/pic05.png" alt=""></div>
              <div class="right">
                <div class="one-one">林小姐提交了设计需求</div>
                <div class="one-two">四川高新区200平别墅...</div>
              </div>
            </div>
            <div class="one-contain">
              <div class="left">
                <img src="../images/pic06.png" alt=""></div>
              <div class="right">
                <div class="one-one">马先生提交了设计需求</div>
                <div class="one-two">福建电平150平住宅...</div>
              </div>
            </div>
          </div>
          <!-- 预约设计师 -->
          <div class="one">
            <div class="one-title">预约设计师</div>
            <div class="one-contain">
              <div class="left">
                <img src="../images/pic07.png" alt=""></div>
              <div class="right">
                <div class="one-one">李先生预约了酷番设计</div>
                <div class="one-two">长春 住宅空间 100平</div>
              </div>
            </div>
            <div class="one-contain">
              <div class="left">
                <img src="../images/pic08.png" alt=""></div>
              <div class="right">
                <div class="one-one">李先生预约了一米阳光做设计</div>
                <div class="one-two">北京 住宅空间 90平</div>
              </div>
            </div>
            <div class="one-contain">
              <div class="left">
                <img src="../images/pic09.png" alt=""></div>
              <div class="right">
                <div class="one-one">李先生预约了旋风原创做设计</div>
                <div class="one-two">河北 住宅空间 130平</div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
    <footer class="foot">
      <div class="up">
        <ul>
          <li><a href="">关于我们 |</a></li>
          <li><a href=""> 联系我们 |</a></li>
          <li><a href=""> 常见建议 |</a></li>
          <li><a href=""> 帮助中心 |</a></li>
          <li><a href=""> 使用条数</a></li>
        </ul>
      </div>
      <div class="down">
      <p>班级姓名：计算机221_谭灿_202210244135</p>
      </div>
    </footer>
  </div>
</body>
</html>